.search-filter-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px;
    @include sm-up {
        padding: 6px 8px;
    }
    gap: 8px;
    box-shadow: inset 0 0 0 1px $blue-20;
    min-width: 0;
    .flag {
        border: 1px solid $blue-20;
        max-width: initial;
        flex-shrink: 0;
    }
    .icon {
        color: $blue-60;
        font-size: 12px;
    }
    .name {
        @include note-13-medium;
        color: $blue-90;
    }
    .close {
        color: $blue-60;
        font-size: 11px;
        line-height: 0;
    }
}

.search-filter-pill--selected {
    background-color: $blue-20;
    &:hover {
        background-color: $blue-10;
        box-shadow: inset 0 0 0 1px $blue-10;
    }
}

.search-filter-pill--interactive {
    &:hover {
        background-color: $blue-20;
        box-shadow: inset 0 0 0 1px $blue-20;
    }
}
